<div class="outer-wrapper">
	<div class="wrapper">
		<div class="logo-and-form">
			<a routerLink="/">
				<div class="logo">
					loklak
				</div>
			</a>
			<div class="search-form">
				<div class="search-input" [class.focused]="inputFocused">
						<input matInput required search autocomplete="off" type="text" id="search" name="search"
							(focus)="inputFocused=true" (focusout)="inputFocused=false" (keypress)="onEnter($event)"
							[formControl]="searchInputControl" [matAutocomplete]="searchSuggestBox" title="Search"
							(keyup.enter)="[relocateEvent.emit(query), closeSuggestBox()]" [(ngModel)]="query"/>

						<mat-autocomplete #searchSuggestBox="matAutocomplete">
							<mat-option *ngFor="let suggestion of suggestionList.slice(0, 4)"
								[value]="suggestion.query">
									{{suggestion.query}}
							</mat-option>
						</mat-autocomplete>
				</div>
				<span class="feature">
					<button title="Search by voice" class="btn btn-default" id="speech-button" type="submit">
						<a><img src="../../assets/images/microphone.png" class="microphone" (click)="speechRecognition()"/></a>
					</button>
					<button class="btn btn-default">
						<a (click)="onClick()"><i id="search-suffix-icon" class="material-icons material-icons.md-dark">search</i></a>
					</button>
				</span>
			</div>
		</div>
		<div class="panel">
			<service-box></service-box>
		</div>
	</div>
	<feed-advanced-search></feed-advanced-search>
</div>
